import supe from '../super.js';


export default class extends supe {

    render() {
        this.node.html(`
    <form class="layui-form" style="margin:100px 200px;">
        <div class="layui-form-item">
            <label class="layui-form-label">查询类型</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required" id="type">
                    <option value=""></option>
                    <option value="name">姓名</option>
                    <option value="age">年龄</option>
                    <option value="address">地址</option>
                    <option value="gender">性别</option>
                    <option value="classId">班级</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">查询条件</label>
            <div class="layui-input-inline">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入查询条件" autocomplete="off"
                    class="layui-input" id="value">
            </div>
        </div>
        <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1" id="submitBtn">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
    </form>
<table class="layui-hide" id="test" lay-filter="test"></table>
        `)

    }

    handle() {
        layui.use(['form', 'table'], function () {
            let { form, table } = layui;
            form.render();

            $('#submitBtn').on('click', function () {
                let obj = { [$('#type').val()]: $('#value').val() }
                table.render({
                    elem: '#test',  //与table标签 id值匹配  
                    url: '/student/typestu',
                    where: obj,
                    method: 'post',
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": "查询成功", //解析提示文本
                            "count": res.result.length, //解析数据长度 总条数 
                            "data": res.result
                        }
                    },
                    cols: [//列
                        [{
                            type: 'numbers' ,   //取值  checkbox   numbers
                            title: '序号',
                        }, {
                            field: 'name',
                            title: '姓名',
                        }, {
                            field: 'gender',
                            title: '性别',


                        }, {
                            field: 'age',
                            title: '年龄',
                            sort: true,
                        }, 
                            {
                                field: 'classId', title: '班级', templet: function (d) {
                                    //  console.log(d);  得到当前行数据
                                    // console.log(this); // 得到表头当前列配置项
                                    // console.log(d.LAY_INDEX); //得到序号。一般不常用

                                    //得到当前行数据，并拼接成自定义模板
                                    return d.classId.classId;
                                }
                            },
                        
                        {
                            field: 'address',
                            title: '地址',

                        },]

                    ],
                })
                table.render();
            })


        })
    }
}